<template>
    <view class="head-box">
        <view class="h-s-box">
            <view class="h-t-bx">
                <view class="lb-txt">{{ dSaleLbTxt }}</view>
                <view class="val-txt">{{ money }}</view>
            </view>
        </view>
        <view class="h-s-box">
            <view class="h-t-bx h-t-bx-w33" v-if="curPageId == 1">
                <view class="lb-txt">{{ grossProfitLbTxt }}</view>
                <view class="val-txt val-txt-normal">{{ grossProfit }}</view>
            </view>
            <view class="h-t-bx h-t-bx-w33">
                <view class="lb-txt">{{
                    curPageId == 1 ? salesVolumeLbTxt : "次数"
                }}</view>
                <view class="val-txt val-txt-normal">{{ salesVolume }}</view>
            </view>
            <view class="h-t-bx h-t-bx-w33">
                <view class="lb-txt">{{ oddNumberLbTxt }}</view>
                <view class="val-txt val-txt-normal">{{ oddNumber }}</view>
            </view>
            <view class="h-t-bx h-t-bx-w33" v-if="curPageId == 2">
                <view class="lb-txt">{{ costLbTxt }}</view>
                <view class="val-txt val-txt-normal">{{ costValue }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import lang from "../../../js/conf/Lang.js";
export default {
    props: ["curPageId"],
    data() {
        return {
            money: 0, //今日销售额
            grossProfit: 0, //毛利
            salesVolume: 0, //销量
            oddNumber: 0, //订单数量
            dSaleLbTxt: lang.saleReport.allSaleTxt,
            grossProfitLbTxt: lang.saleReport.grossProfitTxt,

            costLbTxt: lang.costLbTxt,
            costValue: 0,

            salesVolumeLbTxt: lang.saleReport.salesVolumeTxt,
            oddNumberLbTxt: lang.saleReport.oddNumberTxt,

            toTxt: lang.saleReport.toTxt,
            saleTxt: lang.saleReport.saleTxt,
        };
    },
    methods: {
        setData(data, item) {
            let timeId = item.group;
            if (timeId == "") {
                //全部
                this.dSaleLbTxt =
                    this.curPageId == 1
                        ? lang.saleReport.allSaleTxt
                        : "全部消耗额";
            } else if (timeId == 1) {
                //今日
                this.dSaleLbTxt =
                    this.curPageId == 1
                        ? lang.saleReport.dSaleTxt
                        : "今日消耗额";
            } else if (timeId == 2) {
                //本月
                this.dSaleLbTxt =
                    this.curPageId == 1
                        ? lang.saleReport.mSaleTxt
                        : "本月消耗额";
            } else if (timeId == 3) {
                //季度
                this.dSaleLbTxt =
                    this.curPageId == 1
                        ? lang.saleReport.seSaleTxt
                        : "本季消耗额";
            } else if (timeId == 5) {
                //自定义
                if (item.stime == item.dtime) {
                    this.dSaleLbTxt = item.stime + this.saleTxt;
                } else {
                    this.dSaleLbTxt =
                        item.stime + this.toTxt + item.dtime + this.saleTxt;
                }
            }

            this.money = data.money; //今日销售额
            this.grossProfit = data.grossProfit ? data.grossProfit : 0; //毛利
            this.salesVolume = data.salesVolume; //销量
            this.oddNumber = data.oddNumber; //订单数量
            this.costValue = data.cost; //预约成本
        },
    },
};
</script>

<style lang="scss">
.head-box {
    padding: 15px 80px;
    height: 130px;
    width: calc(100% - 160px);
    border-bottom: 1px #ededed solid;
    .h-s-box {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        justify-content: space-around;
        .h-t-bx {
            font-size: #ff6600;

            .lb-txt {
                font-size: 16px;
                text-align: center;
            }
            .val-txt {
                color: #3388ff;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
            }
            .val-txt-normal {
                font-weight: normal;
                color: #333;
            }
            .val-txt-red {
                color: red;
            }
        }
        .h-t-bx-w {
            width: 50%;
        }

        .h-t-bx-w33 {
            width: 33%;
        }
    }
}
</style>
